<template>
	<view class="animated fadeIn faster bg-fff" style="min-height: 100vh;">
		<view class="px-3 py-3 font30">
			<view class="mb-4" v-if="current.type">
				<text class="bg-main colorfff rounded10 px-1 py font26 mr-1">{{current.type==1?'单选':'判断'}}</text>
				<text class="line-height46">{{current.content}}</text>
			</view>
			<view class="mb-5" v-if="current.type == 1">
				<view class="mb-4" v-if="current.options.A">
					<view class="d-flex d-flex-middle" @click="handlerSelect('A')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('A')==1, 'an-circle-wrong': checkAnswer('A')==2 }">
							<text class="font26">A</text>
						</view>
						<text>{{current.options.A}}</text>
					</view>
				</view>
				<view class="mb-4" v-if="current.options.B">
					<view class="d-flex d-flex-middle" @click="handlerSelect('B')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('B')==1, 'an-circle-wrong': checkAnswer('B')==2 }">
							<text class="font26">B</text>
						</view>
						<text>{{current.options.B}}</text>
					</view>
				</view>
				<view class="mb-4" v-if="current.options.C">
					<view class="d-flex d-flex-middle" @click="handlerSelect('C')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('C')==1, 'an-circle-wrong': checkAnswer('C')==2 }">
							<text class="font26">C</text>
						</view>
						<text>{{current.options.C}}</text>
					</view>
				</view>
				<view class="mb-4" v-if="current.options.D" @click="handlerSelect('D')">
					<view class="d-flex d-flex-middle">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('D')==1, 'an-circle-wrong': checkAnswer('D')==2 }">
							<text class="font26">D</text>
						</view>
						<text>{{current.options.D}}</text>
					</view>
				</view>
			</view>
			<view class="mb-5" v-else>
				<view class="mb-4">
					<view class="d-flex d-flex-middle" @click="handlerSelect('对')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('对')==1, 'an-circle-wrong': checkAnswer('对')==2 }">
							<text class="font26">A</text>
						</view>
						<text>对</text>
					</view>
				</view>
				<view class="mb-4">
					<view class="d-flex d-flex-middle" @click="handlerSelect('错')">
						<view class="answer-option shadow d-flex d-flex-middle d-flex-center mr-2" :class="{ 'an-circle-correct': checkAnswer('错')==1, 'an-circle-wrong': checkAnswer('错')==2 }">
							<text class="font26">B</text>
						</view>
						<text>错</text>
					</view>
				</view>
			</view>
			<view class="p-1" v-if="user_answer">
				<view class="d-flex d-flex-middle">
					<view class="d-flex d-flex-middle mr-5">
						<text class="mr-2 font26">正确答案</text>
						<text class="colorsuccess font30">{{current.correct_answer}}</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="mr-2 font26">您选择</text>
						<text class="font30 colorf00">{{user_answer}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="user_answer && current.explanation">
			<view class="bg-f2f2f2" style="height: 12rpx;"></view>
			<view class="d-flex d-flex-middle d-flex-center py-2"><text>试题详解</text></view>
			<view class="px-3 pb-3">
				<view class="font26 line-height40 color999">
					{{current.explanation}}
				</view>
			</view>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="position-fixed fab-bottom left-0 right-0 z-index-100 pb-5 bg-fff" @click="goBack">
			<view class="d-flex d-flex-between px-3">
				<view class="main-color border-main p-2 d-flex d-flex-item d-flex-middle d-flex-center rounded40">返回</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { userApi } from '@/http/userApi.js'
	import store from '@/store/index.js'
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				current:{
					answer_time: 0,
					answer_type: 1,
					answer_type_name: "日常题库",
					content: "章节1选择题262：以下关于章节1的说法，正确的是哪一项？",
					correct_answer: "A",
					explanation: "本题考察章节1的基础知识。正确答案是A，因为相关知识点内容。",
					id: 3174,
					practice_date: "2025-11-06 00:00:00",
					record_id: 88,
					type: 1,
					user_answer: "B",
					options:{
						A: "选项A：这是章节1相关的第一个选项",
						B: "选项B：这是章节1相关的第二个选项",
						C: "选项C：这是章节1相关的第三个选项",
						D: "选项D：这是章节1相关的第四个选项"
					}
				},
				user_answer:''
			}
		},
		onLoad(e) {
			if(e && e.topic){
				this.current = JSON.parse(decodeURIComponent(e.topic))
			}
		},
		computed:{
			checkAnswer(){
				return function(answ){
					if(this.user_answer == ''){
						return 0
					}
					if(this.user_answer == answ){
						if(this.user_answer == this.current.correct_answer){
							return 1
						}else{
							return 2
						}
					}
					return 0
				}
			},
		},
		methods:{
			goBack(){
				uni.navigateBack()
			},
			handlerSelect(option){
				console.log('option',option)
				let that = this
				that.user_answer = option
				let cntStr = '恭喜您，答对了！'
				if(that.current.correct_answer != option){
					cntStr = `很遗憾，正确答案是${that.current.correct_answer},您选择的是${option}`
				}
				setTimeout(()=>{
					uni.showModal({
						'title': '提示',
						'content': cntStr,
						'showCancel':false,
						'confirmColor':'#3E8EFE',
						success: (res) => {
							if (res.confirm) {
								that.saveAnswer()
							}
						}
					})
				},600)
				
			},
			saveAnswer(){
				let that = this
				uni.showLoading({
					title:'保存答案...'
				})
				const answer = {
					'question_id':that.current.id,
					'answer_type':that.current.answer_type,
					'user_answer':that.user_answer,
					'answer_time':0
				}
				userApi.saveSingleQuestion(answer).then((res)=>{
					uni.showToast({
						title:'答题记录已保存'
					})
					uni.hideLoading()
				}).catch((e)=>{
					uni.hideLoading()
				})
			}
		}
		
	}
</script>

<style scoped>
.answer-option{
	width: 56rpx;
	height: 56rpx;
	border-radius: 56rpx;
	background-color: #fff;
	border: solid 1px #f9f9f9;
}
.correct-option{
	background-color: #3dc092;
	border-color: #3dc092;
	color: #ffffff;
}
.error-option{
	background-color: #f5615e;
	border-color: #f5615e;
	color: #ffffff;
}
.an-circle{
	width: 80rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border-radius: 80rpx;
	border: solid 1px #dddddd;
	overflow: hidden;
}
.an-circle-curr{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30rpx;
	background-color: rgba(0,0,0,.6);
	font-size: 18rpx;
	color:#fff
}
.an-circle-correct{
	background-color: #3dc092;
	color: #fff;
	border-color: #3dc092;
}
.an-circle-wrong{
	background-color: #f5615e;
	color: #fff;
	border-color: #f5615e;
}
.fab-bottom {
  bottom: calc(var(--window-bottom));
}
</style>
